<template>
	<div class="faultStatistics">
		<el-col :span="12" id="dbCol" class="threeCol">
			<div class="dbContainer">
				<div class="oracle">
					<div class="img">
						<img src="~@/assets/img/mainPage/3sjk.png" alt="" />

						<span class="img-text">
							<div>Oracle</div>
						</span>
					</div>
					<div class="status">
						<div class="danger" @click="toWarningPanel({ nodeType: 'oraclealertlist', level: 3 })">
							<el-badge :value="oracle.warning" :max="99" class="item">
								<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
							</el-badge>
						</div>
						<div class="warning" @click="toWarningPanel({ nodeType: 'oraclealertlist', level: 2 })">
							<el-badge :value="oracle.normal" :max="99" class="item" type="warning">
								<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
							</el-badge>
						</div>
					</div>
				</div>
				<div class="sqlserver">
					<div class="img">
						<img src="~@/assets/img/mainPage/3sjk.png" alt="" />

						<span class="img-text">
							<div>SQLServer</div>
						</span>
					</div>
					<div class="status">
						<div class="danger" @click="toWarningPanel({ nodeType: 'sqlserveralertlist', level: 3 })">
							<el-badge :value="sqlserver.warning" :max="99" class="item">
								<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
							</el-badge>
						</div>
						<div class="warning" @click="toWarningPanel({ nodeType: 'sqlserveralertlist', level: 2 })">
							<el-badge :value="sqlserver.normal" :max="99" class="item" type="warning">
								<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
							</el-badge>
						</div>
					</div>
				</div>

				<div class="mysql">
					<div class="img">
						<img src="~@/assets/img/mainPage/3sjk.png" alt="" />

						<span class="img-text">
							<div>Mysql</div>
						</span>
					</div>
					<div class="status">
						<div class="danger" @click="toWarningPanel({ nodeType: 'mysqlalertlist', level: 3 })">
							<el-badge :value="mysql.warning" :max="99" class="item">
								<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
							</el-badge>
						</div>
						<div class="warning" @click="toWarningPanel({ nodeType: 'mysqlalertlist', level: 2 })">
							<el-badge :value="mysql.normal" :max="99" class="item" type="warning">
								<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
							</el-badge>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="txt">
        <div class="yzgj">
          <p class="yzjg-text">严重告警</p>

          <span
            :class="db.warning ? 'serious' : 'green'"
            class="el-dropdown-link"
            @click="handleCommand({ nodeType: 'dbalertlist', level: 3 })"
          >
            <i style="font-style: normal" v-if="db.warning > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              db.warning ? db.warning : "0"
            }}</i>
          </span>
        </div>
        <div class="ptjg">
          <p class="ptjg-text">普通告警</p>

          <span
            :class="db.normal ? 'general' : 'green'"
            class="el-dropdown-link"
            @click="handleCommand({ nodeType: 'dbalertlist', level: 2 })"
          >
            <i style="font-style: normal" v-if="db.normal > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              db.normal ? db.normal : "0"
            }}</i>
          </span>
        </div>
      </div> -->
		</el-col>
		<div class="snContainer">
			<div class="serverCol">
				<div class="img">
					<img src="~@/assets/img/mainPage/server.png" alt="" />

					<span class="img-text">
						<div>服务器</div>
					</span>
				</div>
				<div class="status">
					<div class="danger" @click="toWarningPanel({ nodeType: 'osalertlist', level: 3 })">
						<el-badge :value="server.warning" :max="99" class="item">
							<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
						</el-badge>
					</div>
					<div class="warning" @click="toWarningPanel({ nodeType: 'osalertlist', level: 2 })">
						<el-badge :value="server.normal" :max="99" class="item" type="warning">
							<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
						</el-badge>
					</div>
				</div>
				<!-- <div class="txt">
        <div class="yzjg">
          <p class="yzjg-text">严重告警</p>

          <span
            :class="server.warning ? 'serious' : 'green'"
            class="el-dropdown-link"
            @click="handleCommand({ nodeType: 'osalertlist', level: 3 })"
          >
            <i style="font-style: normal" v-if="server.warning > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              server.warning ? server.warning : "0"
            }}</i>
          </span>
        </div>
        <div class="ptjg">
          <p class="ptjg-text">普通告警</p>
          <span
            :class="server.normal ? 'general' : 'green'"
            class="el-dropdown-link"
            @click="handleCommand({ nodeType: 'osalertlist', level: 2 })"
          >
            <i style="font-style: normal" v-if="server.normal > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              server.normal ? server.normal : "0"
            }}</i>
          </span>
        </div>
      </div> -->
			</div>
			<div class="netCol">
				<div class="img">
					<img src="~@/assets/img/mainPage/net.png" alt="" />

					<span class="img-text">
						<div>网络</div>
					</span>
				</div>
				<div class="status">
					<div class="danger" @click="toWarningPanel({ nodeType: 'netalertlist', level: 3 })">
						<el-badge :value="net.warning" :max="99" class="item">
							<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
						</el-badge>
					</div>
					<div class="warning" @click="toWarningPanel({ nodeType: 'netalertlist', level: 2 })">
						<el-badge :value="net.normal" :max="99" class="item" type="warning">
							<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
						</el-badge>
					</div>
				</div>
				<!-- <div class="txt">
        <div class="yzjg">
          <p class="yzjg-text">严重告警</p>
          <span
            class="el-dropdown-link"
            :class="net.warning ? 'serious' : 'green'"
            @click="
              handleCommand({
                nodeType: 'netalertlist',
                level: 3,
              })
            "
          >
            <i style="font-style: normal" v-if="net.warning > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              net.warning ? net.warning : "0"
            }}</i>
          </span>
        </div>
        <div class="ptjg">
          <p class="ptjg-text">普通告警</p>

          <span
            class="el-dropdown-link"
            :class="net.normal ? 'general' : 'green'"
            @click="
              handleCommand({
                nodeType: 'netalertlist',
                level: 2,
              })
            "
          >
            <i style="font-style: normal" v-if="net.normal > 9999"
              >9999<sup>+</sup></i
            >
            <i style="font-style: normal" v-else>{{
              net.normal ? net.normal : "0"
            }}</i>
          </span>
        </div>
      </div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getFaultStatistics
	} from "@/api/index.js";
	import bus from "common/bus.js";

	export default {
		components: {},
		data() {
			return {
				db: {
					warning: "",
					normal: "",
				},
				oracle: {
					warning: 0,
					normal: 0,
				},
				sqlserver: {
					warning: 0,
					normal: 0,
				},
				mysql: {
					warning: 0,
					normal: 0,
				},
				server: {
					warning: "",
					normal: "",
				},
				net: {
					warning: "",
					normal: "",
				},
				postData: {
					opera: "dbalertlist",
					curPage: 1,
					pageSize: 10000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				postOSData: {
					opera: "osalertlist",
					curPage: 1,
					pageSize: 10000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						os_type: "i"
					}, //0616更改 添加"os_type":"i"
				},
				postNetData: {
					opera: "osalertlist",
					curPage: 1,
					pageSize: 10000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "exactquery",
					filters: {
						OS_TYPE: "Network",
					},
				},
				levelThree: [],
				levelTwo: [],
				timerName: "FaultStatistics",
				timerEventName: "timerFaultStatistics",
				timerInterval: 1000 * 60,
			};
		},
		created() {
			this.getData();
			this.getOSData();
			this.getNetData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getData();
					this.getOSData();
					this.getNetData();
				}
			});
		},
		mounted() {},
		computed: {},
		methods: {
			handleCommand(command) {
				// switch (command.nodeType) {
				//     case "dbalertlist":
				//          this.$router.push({
				//     name: "warningPanelDB",
				//     params: {
				//         // nodeType: command.nodeType,
				//         level: command.level,
				//     },
				// });

				//         break;
				//     case 'osalertlist':
				//     case "netalertlist":
				//          this.$router.push({
				//     name: "warningPanelOSNetWork",
				//     params: {
				//         // nodeType: command.nodeType,
				//         level: command.level,
				//     },
				// });

				//         break;

				// }
				this.$router.push({
					name: "CountwarningPanel",
					params: {
						// nodeType: command.nodeType,
						level: command.level,
					},
				});
				bus.$emit("handCommand", command);
			},
			getData() {
				// fetchData({
				//     postData: JSON.stringify(this.postData),
				// }).then((res) => {

				//     let _arr = res;
				//     this.levelThree = [];
				//     this.levelTwo = [];
				//     for (let i = 0; i < _arr.data.length; i++) {
				//         const arrEle = _arr.data[i];
				//         if (arrEle.ALERT_LEVEL == 3) {
				//             this.levelThree.push(arrEle);
				//         }
				//         if (arrEle.ALERT_LEVEL == 2) {
				//             this.levelTwo.push(arrEle);
				//         }
				//     }
				//     this.db.warning = this.levelThree.length;
				//     this.db.normal = this.levelTwo.length;
				// });

				getFaultStatistics().then((res) => {
					let _arr = [...res["Mysql"], ...res["Oracle"], ...res["SQLServer"]];
					this.levelThree = [];
					this.levelTwo = [];
					this.oracle = {
						warning: 0,
						normal: 0,
					};
					this.sqlserver = {
						warning: 0,
						normal: 0,
					};
					this.mysql = {
						warning: 0,
						normal: 0,
					};
					for (let i = 0; i < _arr.length; i++) {
						const arrEle = _arr[i];
						if (arrEle.alertLevel == 3) {
							this.levelThree.push(arrEle);
						}
						if (arrEle.alertLevel == 2) {
							this.levelTwo.push(arrEle);
						}
					}

					for (let i = 0; i < res["Oracle"].length; i++) {
						const arrEle = res["Oracle"][i];
						if (arrEle.alertLevel == 3) {
							this.oracle.warning += 1;
						}
						if (arrEle.alertLevel == 2) {
							this.oracle.normal += 1;
						}
					}

					for (let i = 0; i < res["SQLServer"].length; i++) {
						const arrEle = res["SQLServer"][i];
						if (arrEle.alertLevel == 3) {
							this.sqlserver.warning += 1;
						}
						if (arrEle.alertLevel == 2) {
							this.sqlserver.normal += 1;
						}
					}

					for (let i = 0; i < res["Mysql"].length; i++) {
						const arrEle = res["Mysql"][i];
						if (arrEle.alertLevel == 3) {
							this.mysql.warning += 1;
						}
						if (arrEle.alertLevel == 2) {
							this.mysql.normal += 1;
						}
					}

					this.db.warning = this.levelThree.length;
					this.db.normal = this.levelTwo.length;
				});
			},
			getOSData() {
				// fetchData({
				//     postData: JSON.stringify(this.postOSData),
				// }).then((res) => {
				//     let _arr = res;
				//     this.levelThree = [];
				//     this.levelTwo = [];
				//     for (let i = 0; i < _arr.data.length; i++) {
				//         const arrEle = _arr.data[i];
				//         if (arrEle.ALERT_LEVEL == 3) {
				//             this.levelThree.push(arrEle);
				//         }
				//         if (arrEle.ALERT_LEVEL == 2) {
				//             this.levelTwo.push(arrEle);
				//         }
				//     }
				//     this.server.warning = this.levelThree.length;
				//     this.server.normal = this.levelTwo.length;
				// });

				getFaultStatistics().then((res) => {
					let _arr = [...res["OS"]];
					this.levelThree = [];
					this.levelTwo = [];
					for (let i = 0; i < _arr.length; i++) {
						const arrEle = _arr[i];
						if (arrEle.alertLevel == 3) {
							this.levelThree.push(arrEle);
						}
						if (arrEle.alertLevel == 2) {
							this.levelTwo.push(arrEle);
						}
					}
					this.server.warning = this.levelThree.length;
					this.server.normal = this.levelTwo.length;
				});
			},
			getNetData() {
				// fetchData({
				//     postData: JSON.stringify(this.postNetData),
				// }).then((res) => {
				//   let _arr = res;
				//     this.levelThree = [];
				//     this.levelTwo = [];
				//     for (let i = 0; i < _arr.data.length; i++) {
				//         const arrEle = _arr.data[i];
				//         if (arrEle.ALERT_LEVEL == 3) {
				//             this.levelThree.push(arrEle);
				//         }
				//         if (arrEle.ALERT_LEVEL == 2) {
				//             this.levelTwo.push(arrEle);
				//         }
				//     }
				//     this.net.warning = this.levelThree.length;
				//     this.net.normal = this.levelTwo.length;
				// });

				getFaultStatistics().then((res) => {
					let _arr = [...res["Network"]];
					this.levelThree = [];
					this.levelTwo = [];
					for (let i = 0; i < _arr.length; i++) {
						const arrEle = _arr[i];
						if (arrEle.alertLevel == 3) {
							this.levelThree.push(arrEle);
						}
						if (arrEle.alertLevel == 2) {
							this.levelTwo.push(arrEle);
						}
					}
					this.net.warning = this.levelThree.length;
					this.net.normal = this.levelTwo.length;
				});
			},
			SelectDb(type) {
				switch (type) {
					case "Oracle":
						this.$router.push({
							name: "dashBoardOracle",
						});

						break;
					case "SQLServer":
						this.$router.push({
							name: "dashBoardSqlserver",
						});

						break;

					case "Mysql":
						this.$router.push({
							name: "dashBoardMysql",
						});

						break;
					case "server":
						this.$router.push({
							name: "dashBoardServer",
						});

						break;
					case "network":
						this.$router.push({
							name: "dashBoardInternet",
						});

						break;
				}
			},
			toWarningPanel(command) {
				this.$router.push({
					name: "warningPanelFault",
					params: {
						nodeType: command.nodeType,
						level: command.level,
					},
				});
				bus.$emit("handCommand", command);
				// this.$message.warning("暂停服务")
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
	};
</script>

<style scoped>
	@media screen and (max-width: 1365px) and (min-width: 1280px) {

		.threeCol .txt,
		.netCol .txt {
			font-size: 14px;
		}

		.ptjg-text,
		.yzjg-text {
			font-size: 12px;
		}

		.threeCol .img span {
			font-size: 12px;
		}

		.serverCol .img span {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {

		/* .threeCol .txt,
  .netCol .txt {
    

    font-size:14px
  } */
		.ptjg-text,
		.yzjg-text {
			font-size: 14px;
			/* color: green; */
		}

		/* .threeCol {
    padding: 5px;
  } */
		.general,
		.green {
			font-size: 12px;
		}

		.threeCol .img span {
			font-size: 14px;
		}

		.netCol .img span {
			font-size: 14px;
		}

		.serverCol .img span {
			font-size: 14px;
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1600px) {

		.threeCol .txt,
		.netCol .txt {
			font-size: 12px;
		}

		.ptjg-text,
		.yzjg-text {
			font-size: 16px;
		}

		.threeCol .img span {
			font-size: 16px;
		}

		.netCol .img span {
			font-size: 16px;
		}

		.serverCol .img span {
			font-size: 16px;
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {

		.ptjg-text,
		.yzjg-text {
			font-size: 20px;
		}

		.threeCol .img span {
			font-size: 20px;
		}

		.netCol .img span {
			font-size: 20px;
		}

		.serverCol .img span {
			font-size: 20px;
		}
	}

	@media screen and (min-width: 2560px) {

		.ptjg-text,
		.yzjg-text {
			font-size: 28px;
		}

		.threeCol .img span {
			font-size: 28px;
		}

		.netCol .img span {
			font-size: 28px;
		}

		.serverCol .img span {
			font-size: 28px;
		}
	}

	.faultStatistics {
		text-align: center;
		color: aliceblue;
		display: grid;
		grid-template-columns: 3fr 2fr;
	}

	.threeCol {
		height: 100%;
		/* border-right: 1px solid #c0c4cc; */
		width: 100%;
	}

	.dbContainer>div {
		width: 90%;
		height: 90%;
	}

	.snContainer>div {
		width: 88%;
		height: 90%;
	}

	.dbContainer>div,
	.snContainer>div {
		/* background: rgba(189, 195, 199, 0.2);
  box-shadow: 0 0 13px rgb(2, 16, 51);
  border-radius:5px ; */
		background: rgb(2, 16, 51);
	}

	/* .dbContainer > div:hover,
.snContainer > div:hover {
  transform: scale(105%);
  
} */

	.serverCol,
	.netCol {
		/* display: grid;
  grid-template-columns: auto 40px; */
		display: flex;
		flex-direction: row;
		/* height: 100%; */
		padding-right: 5px;
		/* width: 100%; */
		align-items: center;
		/* height: 100%; */
		flex-grow: 1;
	}

	/* .threeCol .txt,
.netCol .txt {
  display: grid;
  grid-template-rows: 1fr 1fr;
} */
	/* #dbCol {
  display: grid;
  grid-template-columns: 1fr;
} */
	div.img img {
		margin-top: 10%;
		width: 50px;
		height: 50px;
	}

	.serious {
		color: rgb(245, 108, 108);
		font-size: x-large;
	}

	.general {
		color: rgb(230, 162, 60);
		font-size: x-large;
	}

	.green {
		color: #67c23a;
		font-size: x-large;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.img {
		cursor: pointer;
		flex: 3;
		/* display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center; */
	}

	.dbContainer {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		height: 100%;
		align-items: center;
		justify-items: center;
	}

	.img-text {
		/* display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%; */
		height: 100%;
	}

	.status {
		padding-top: 15px;
		display: flex;
		flex-direction: column;
		font-size: 20px;
		align-items: flex-start;
		flex: 1;
	}

	.serverCol .status,
	.netCol .status {
		/* height: 100%; */
	}

	.status * {
		flex-grow: 1;
	}

	.dbContainer>div {
		display: flex;
		flex-direction: row;
		/* height: 100%; */
	}

	.serverCol>div,
	.netCol>div {
		height: 100%;
	}

	.serverCol>div.img,
	.netCol>div.img,
	.oracle>div.img,
	.sqlserver>div.img,
	.mysql>div.img {
		display: grid;
		align-items: center;
		justify-content: center;
	}

	.warning,
	.danger {
		cursor: pointer;
	}

	.danger {
		display: flex;
		align-items: center;
	}

	.netCol .status {
		align-items: flex-start;
	}

	.snContainer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		align-items: center;
		justify-items: center;
	}
</style>
